<template>
<div class="img-text flex">
	<div class="c1" @click="emit('selectImg','imgs')">
		<el-image :src="config.serverImg + element.img" fit="scale-down" lazy />
	</div>
	<div class="c3">
		<div class="flex c2">
			<p>文本1：</p>
			<el-input v-model="element.text1" clearable/>
		</div>
		<div class="flex c2">
			<p>文本2：</p>
			<el-input v-model="element.text2" clearable/>
		</div>
		<div class="flex c2">
			<p>文本3：</p>
			<el-input v-model="element.text3" clearable/>
		</div>
	</div>
</div>
</template>

<script setup>
	import publicJS from "@/hook/public.js";
	const {
		config,
		defaultImg
	} = publicJS();
	const emit = defineEmits(["selectImg"]); //自定义事件
	const props = defineProps({
		element: {
			type: Object,
			default: () => {
				return {}
			}
		}
	})
	const formData = {
		img:defaultImg,
		text:'',
		url:'',
		mode:'',//页面或连接 打开方式
		show:true,
	}
	
	//暴露方法给父组件 通过ref.value调用
	defineExpose({
		formData
	})
</script>

<style scoped lang="scss">
	.img-text{
		flex:1;
		.c1 {
			margin-right: 20px;
			cursor: pointer;
			width: 100px;
			height: 100px
		
		}
		
		.c1 .el-image {
			border: 1px solid #eee;
			width: 100px;
			height: 100px
			// display:block;
		}
		
		.c1 .el-image:hover {
			border-color: var(--el-color-primary);
		}
		
		.c2 {
	
			margin:3px 0;
			p{width: 60px;font-size:14px;}
			.el-input{flex:1;}
		
		
		}
		
		.c3 {
			flex:1;
		}
		
		.c4 {
			justify-content: space-between;
		}
	}

</style>
